/**
 * 分类列表页
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    Image,
    View,
    Button,
    Text,
    ListView,
} from 'react-native';
// 下拉刷新/上拉加载更多组件
import Scroller from '../../components/Scroller';
import CreationItem from '../../components/CreationItem';



// 缓存列表中所有数据
let cachedResults = {
    nextPage: 1, // 下一页
    items: [], // listview 数据(视频列表)
    total: 0 // 总数
};
class CateTitle extends Component {
    render() {
        return (
            <Image source={require('../../img/i2.png')} style={{ width: 20, height: 20, marginLeft: 120 }} />
        )
    }
}
export default class CatePage extends Component {
    // 构造函数
    constructor(props) {
        super(props);
        let ds = new ListView.DataSource({
            // 比较两条数据是否是一样的,来判断数据是否发生改变
            rowHasChanged: (r1, r2) => r1 !== r2
        });
        this.state = {
            dataSource: ds.cloneWithRows([]),
            isLoadingTail: false, // loading?
            isRefreshing: false // refresh?
        }
    }
    static navigationOptions = {
        title:'分类'
        /**headerStyle:{
            backgroundColor :'orange'
        }, */
    }
    render() {//<View style={{backgroundColor:'orange'}}><Text style={{textAlign:'center',paddingVertical:10,fontSize:16,color:'#fff'}}>标题</Text></View>
        return (
            <View style={styles.container}>
                <Scroller
                    // 数据源
                    dataSource={this.state.dataSource}
                    // 渲染item(子组件)
                    renderRow={this._renderRow.bind(this)}
                    // 是否可以刷新
                    isRefreshing={this.state.isRefreshing}
                    // 是否可以加载更多
                    isLoadingTail={this.state.isLoadingTail}
                    // 请求数据
                    fetchData={this._fetchData.bind(this)}
                    // 缓存列表数据
                    cachedResults={cachedResults}
                />
            </View>
        )
    }

    // 生命周期-组件挂载完毕 请求数据
    componentDidMount() {
        this._fetchData(1);
    }

    // 请求数据
    _fetchData(pageSize) {

        if (pageSize !== 0) { // 加载更多操作
            this.setState({
                isLoadingTail: true
            });
        } else { // 刷新操作
            this.setState({
                isRefreshing: true
            });
            // 初始哈 nextPage
            cachedResults.nextPage = 2;
        }

        fetch(`http://api.midoogame.com/stat/gamelist?fromtype=1&page=${pageSize}&type=0`)
            // data 变化的新数据
            .then(resp => {
                resp.json().then(({ data: { gamelist, typearr, page } }) => {

                    if (gamelist.length != 0) {
                        // 保存原数据
                        let items = cachedResults.items.slice();
                        if (pageSize !== 0) { // 加载更多操作
                            console.log('加载更多:', items)
                            // 数组拼接
                            items = items.concat(gamelist);
                            cachedResults.nextPage += 1;
                        } else { // 刷新操作
                            console.log('刷新:', items)
                            // 数据不变
                            items = gamelist;
                        }

                        cachedResults.items = items; // 视频列表数据
                        cachedResults.total = page.total; // 总数

                        setTimeout(() => {
                            if (pageSize !== 0) { // 加载更多操作
                                this.setState({
                                    isLoadingTail: false,
                                    dataSource: this.state.dataSource.cloneWithRows(cachedResults.items)
                                });
                            } else { // 刷次操作
                                this.setState({
                                    isRefreshing: false,
                                    dataSource: this.state.dataSource.cloneWithRows(cachedResults.items)
                                });
                            }
                        }, 1000);
                    }/**/
                })
            })
            .catch((error) => {
                if (pageSize !== 0) { // 上拉加载更多操作
                    this.setState({
                        isLoadingTail: false
                    });
                } else {
                    this.setState({ // 刷新操作
                        isRefreshing: false
                    });
                }
                console.error(error);
            });
    }

    // 列表 Item
    _renderRow(row) {
        const { navigation } = this.props;
        return (
            <CreationItem
                navigation={navigation}
                //key={row.id} 子组件唯一性
                row={row}
            />
        )
    }
}

// 样式
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    // 头部样式
    header: {
        paddingTop: 25,
        paddingBottom: 12,
        backgroundColor: '#ee735c',
    },
    // 头部title样式
    headerTitle: {
        color: '#fff',
        fontSize: 16,
        textAlign: 'center',
        fontWeight: '600'
    },
    // 菊花图
    loadingMore: {
        marginVertical: 20
    },
    // 文案样式
    loadingText: {
        color: '#777',
        textAlign: 'center'
    }
});